document.body.onload = function() {
  var notification = decode(window.location.search.substring(1));

  fillIn('img', notification['image']['fullPath'], 'src');
  fillIn('text', notification['text']);
  fillIn('ago', hoursAgo(notification['createdAt']));
  var target = notification['target'];
  var type = target['type'];
  switch (type) {
    case 'user':
      // A user may want to be friends with you
      setOnclick(notification['createdAt'],
          'https://www.foursquare.com/user/' + target['object']['id']);
      break;
    case 'checkin':
      // Are these all "Bob commented on your checkin at Venue" ?
      // TODO: Comments on your own checkins will effectively show up with two
      // notifications, do we want that?
      setOnclick(notification['createdAt'],
          'https://www.foursquare.com/user/' + target['object']['user']['id'] +
          '/checkin/' + target['object']['id']);
      break;
    case 'venue':
      // Venue special
      setOnclick(notification['createdAt'],
          'https://www.foursquare.com/venue/' + target['object']['id']);
      break;
    case 'tip':
      // Someone did your tip
      setOnclick(notification['createdAt'],
          'https://www.foursquare.com/item/' + target['object']['id']);
    default:
      // At the very least, clicking should set a new notification highwater
      // and close the notification
      setOnclick(notification['createdAt']);
  }

  window.setTimeout(function() { window.close(); }, 10000);
}

// Sets onclick of body element to open a URL, mark notifications read up to
// this point, and close the popup.
function setOnclick(highwater, url) {
  document.body.onclick = function() {
    if (url) {
      chrome.tabs.create({url: url});
    }
    xhr('https://api.foursquare.com/v2/updates/marknotificationsread' +
        '?highWatermark=' + highwater, function(resp) { window.close(); },
            {'method': 'POST'});
  };
}
